<template>
  <div class="wrap" id="">
    <button @click="obj.a++">修改obj.a</button>
    <div class="search_form">
      <div class="logo"><img src="@/assets/logo.png" alt="logo" /></div>
      <div class="form_group">
        <input type="text" class="input_txt" placeholder="请输入查询的天气" />
        <button class="input_sub loading">搜 索</button>
      </div>
      <div class="hotkey">
        <a href="javascript:;">北京</a>
        <a href="javascript:;">上海</a>
        <a href="javascript:;">广州</a>
        <a href="javascript:;">深圳</a>
      </div>
    </div>
    <ul class="weather_list">
      <li>
        <div class="info_type">
          <span class="iconfont">&#xe932;</span>
        </div>
        <div class="info_temp">高 <b>32℃</b><br />低 32℃</div>
        <div class="info_date"><b>深圳</b><span>5月19日</span></div>
      </li>
    </ul>
    <!-- 下面是模板 -->
    <div class="tem">
      <h2>模板</h2>
      <!-- 雨 -->
      <span class="iconfont">&#xe931;</span>
      <!-- 晴 -->
      <span class="iconfont">&#xe933;</span>
      <!-- 阴 -->
      <span class="iconfont">&#xe92d;</span>
      <!-- 雪 -->
      <span class="iconfont">&#xeb87;</span>
      <!-- 云 -->
      <span class="iconfont">&#xeb79;</span>
      <!-- 雷 -->
      <span class="iconfont">&#xeb77;</span>
      <!-- 雹 -->
      <span class="iconfont">&#xeb76;</span>
      <!-- 雾 -->
      <span class="iconfont">&#xeb75;</span>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      obj: { a: 10 }
    }
  },
  watch: {
    obj: {
      handler (newVal, oldVal) {
        console.log(newVal, oldVal)
      },
      deep: true
    }
  }
}
</script>
<style>
@import url('~@/styles/css/reset.css');
@import url('~@/styles/css/iconfont.css');
@import url('~@/styles/css/main2.css');
.tem .iconfont {
  font-size: 50px;
}
</style>
